I have challenged myself to build a small website (with a frontend and backend) for AI image generation.
Visit Parcelhus Finder and explore the world of Danish Parcelhuse:
- Visit a Danish parcelhus neighbourhood
- Listen to a parcelhus podcast
- Create new variations of parcelhouses
I think there is a potential for different AI tools to act as a new kind of brainstorming assistants to human creativity.
Site will be updated. Input(s) appreciated!
Tools used: FLUX api (image generation), LORA (Parcelhus image training), Claude and chatGTP (for coding), Notebook LM (for podcast), Google Firebase (Hosting)
Note: As of now I prefer Claude for instant code generating and ChatGPT4o preview for deeper analysis of code.
THX to hashtagNORDFY for online classes, and hashtagIsmailSeleit for the teaching
hashtagai hashtagaiarchitecture hashtagarchitecture
Try it here:
https://parcelhusfinderv6v3.web.app/
TECH STACK:
Build with assistance of Claude Sonnet
Frontend Framework:
- React 18+ - UI library for building interactive web interfaces
- React Hooks (useState, useEffect) - State management and side effects
Styling:
- CSS3 - Custom stylesheets for component styling
- Responsive design - Mobile-first approach with media queries
Backend Services:
- Firebase Realtime Database - NoSQL database for storing image metadata (prompts, timestamps)
- Firebase Cloud Storage - Object storage for generated images and audio files
- Firebase Cloud Functions - Serverless backend for image generation API calls
- Firebase Hosting - Web application hosting
API Integration:
- Axios - HTTP client for making requests to Cloud Functions
- FAL AI (Flux API) - AI image generation service with LoRA model support
- Firebase Functions API - Callable functions for backend operations
Image Generation & AI:
- Flux Diffusion Model - AI model for generating images from text prompts
- LoRA (Low-Rank Adaptation) - Fine-tuning technique for customizing the base model
- Custom LoRA weights - Pre-trained weights for "parcelhus" style
Storage & File Management:
- Google Cloud Storage - Underlying storage for Firebase
- Signed URLs - Secure temporary access to stored files
- WAV audio files - Audio format for podcast storage
Development Tools:
- Node.js & npm - JavaScript runtime and package manager
- ESLint - Code quality and linting
- Create React App - React project bootstrapping
- VS Code - Development environment
Key Features Implemented:
- Dynamic image generation with adjustable LoRA scale
- Image gallery with prompt display on hover
- Audio player for historical content
- Progress tracking during image generation
- Firebase Realtime Database synchronization
- Error handling and user feedback